<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>账户余额</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
    <script type="text/javascript" src="../../shop-style/js/jquery.js"></script>
    <script type="text/javascript" src="../../shop-style/js/index.js"></script>
    <script src="../../shop-style/script/global.js" type="text/javascript"></script>
    <script src="../../shop-style/script/head.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../shop-style/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="../../shop-style/css/basic.css">
    <link rel="stylesheet" type="text/css" href="../../shop-style/css/style.css" />
    <link rel="stylesheet" href="../../shop-style/style/base.css" />
    <link rel="stylesheet" href="../../shop-style/style/head.css" />
    <link rel="stylesheet" type="text/css" href="../../h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="../../lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="../../h-ui.admin/css/style.css" />
</head>

<body>

<!-- 插入公共模板 _top -->
<div th:replace="../templates/user/common/_top :: common_top"></div>

<!-- 插入公共模板 _headNav -->
<div th:replace="../templates/user/common/_headNav :: common_headNav"></div>

<!--中部 start-->
<div class="con_ny">
    <div class="danye">
        <!-- 左侧导航 start -->
        <!-- 插入公共模板 _user_center_left -->
        <div th:replace="../templates/user/common/_user_center_left :: common_user_center_left"></div>
        <!-- 左侧导航 end -->

        <!--单页详情开始-->
        <div class="danye_right">
            <div class="danye_dqbt">
                <span class="jj_t"></span>
                <span class="dq_dy">您的当前位置：<a th:href="@{/goodsAction/goIndex}">首页</a> >> 用户中心 >> 账户余额</span>
            </div>
            <!--会员中心右侧开始-->
            <div class="hyzx_yc">
                <div class="hyzx_yck1"></div>
                <form th:action="@{doUserAmount}" method="post" class="form form-horizontal" id="form-user-amount">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>账户余额(元)：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" id="old_userAmount" th:value="|${#numbers.formatDecimal(user.userAmount/100.0,1,2)}|" class="input-text" autocomplete="off" disabled>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>请输入充值的金额(元)：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" autocomplete="off" placeholder="请输入正确的金额，如: 800.88 、100 等。" name="userAmount" id="userAmount">
                        </div>
                    </div>
                    <div class="row cl">
                        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                            <input type="hidden" name="userId" th:value="${user.userId}">
                            <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;充值&nbsp;&nbsp;">
                        </div>
                    </div>
                </form>
                <div class="none1"></div>

            </div>
            <!--会员中心右侧结束-->
        </div>
        <!--单页详情结束-->
    </div>
</div>
<!--中部 end-->

<div class="none" style="height:20px;"></div>

<!-- 插入公共模板 _footer -->
<div th:replace="../templates/user/common/_footer :: common_footer"></div>

<!-- 引入城市三级联动js -->
<script type="text/javascript" src="../../my/area.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="../../h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="../../h-ui.admin/js/H-ui.admin.page.js"></script>
<script type="text/javascript" src="../../lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    $(function(){

        //自定义validate验证输入的数字小数点位数不能大于两位
        jQuery.validator.addMethod("minNumber",function(value, element){
            var returnVal = true;
            inputZ=value;
            var ArrMen= inputZ.split(".");    //截取字符串
            if(ArrMen.length==2){
                if(ArrMen[1].length>2){    //判断小数点后面的字符串长度
                    returnVal = false;
                    return false;
                }
            }
            return returnVal;
        },"小数点后最多为两位");         //验证错误信息


        $("#form-user-amount").validate({
            rules:{
                userAmount:{
                    required:true,
                    number:true,
                    min: 0.01,          //输入的数字最小值为0.01，不能为0或者负数
                    minNumber: $("#userAmount").val()    //调用自定义验证
                }
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                // 判断金额是否超出21474836.47的上限
                var old_userAmount = $("#old_userAmount").val();
                var userAmount = $("#userAmount").val();
                if( Number(old_userAmount) + Number(userAmount) > 21474836.47) {
                    layer.msg("您充值的金额超出限额，无法充值!",{icon: 5,time:1000})
                    return;
                }
                $(form).ajaxSubmit({
                    dateType: "json",
                    success: function (result) {
                        if(result.flag == "true"){
                            layer.msg("充值成功,请刷新!",{icon: 6,time:1000});
                        }
                        if(result.flag == "false"){
                            layer.msg("充值失败!",{icon: 2,time:1000});
                        }
                    },
                    error: function (err) {
                        layer.msg('请求异常!',{icon: 2,time:1000})
                    }
                });
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->


</body>
</html>
